package com.midele.goodstuff.ui.record

import android.text.SpannableString
import android.text.style.UnderlineSpan
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ExperimentalLayoutApi
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.OutlinedButton
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.constraintlayout.compose.ConstraintLayout
import androidx.constraintlayout.compose.Dimension
import com.midele.goodstuff.R
import com.midele.goodstuff.ui.theme.Black12
import com.midele.goodstuff.ui.theme.Black21
import com.midele.goodstuff.ui.theme.Gray64
import com.midele.goodstuff.ui.theme.WhiteC8
import com.midele.goodstuff.ui.theme.WhiteDC
import com.midele.goodstuff.ui.theme.YellowFC

@OptIn(ExperimentalMaterial3Api::class, ExperimentalLayoutApi::class)
@Composable
fun RecordFinishScreen() {

    val qualityList = listOf("全品", "断珠", "断补", "原粘")
    val shapeList = listOf("长珠", "圆珠")

    val textStr = "这是一个带有下划线的文本"
    val spannableText = SpannableString(textStr)
    spannableText.setSpan(UnderlineSpan(), 0, textStr.length, 0)

    Scaffold(
        topBar = {
            TopAppBar(
                title = {
                    Text(
                        "传承登记",
                        color = Color.White,
                        fontSize = 17.sp,
                        fontWeight = FontWeight.Bold,
                        textAlign = TextAlign.Center,
                    )
                },
                navigationIcon = {
                    IconButton(onClick = { }) {
                        Icon(
                            painter = painterResource(id = R.mipmap.ic_white_back_arrow),
                            contentDescription = "返回"
                        )
                    }
                }
            )
        },
        content = { paddingValues ->
            val bottomPadding = paddingValues.calculateBottomPadding() + 16.dp
            val topPadding = paddingValues.calculateTopPadding()
            Box(
                modifier = Modifier
                    .background(Color.Black)
                    .fillMaxSize()
                    .padding(bottom = bottomPadding, top = topPadding)
            ) {
                Column(
                    modifier = Modifier
                        .fillMaxSize()
                        .padding(top= 20.dp,start = 16.dp, end = 16.dp, bottom = 80.dp)
                        .verticalScroll(rememberScrollState())
                ) {
                    Column(
                        modifier = Modifier
                            .fillMaxWidth()
                            .clip(RoundedCornerShape(12.dp))
                            .background(YellowFC.copy(alpha = 0.1f))
                            .padding(top = 12.dp, bottom = 12.dp, start = 16.dp, end = 16.dp)

                    ) {
                        Box(modifier = Modifier.fillMaxWidth().padding(bottom = 16.dp)) {
                            Text(
                                "物品信息",
                                color = Color.White,
                                fontSize = 16.sp,
                                fontWeight = FontWeight.Bold,
                                modifier = Modifier.align(Alignment.TopStart)
                            )
                            Text(
                                "修改",
                                color = YellowFC,
                                fontSize = 14.sp,
                                modifier = Modifier.align(Alignment.TopEnd)
                            )
                        }
                        Box(modifier = Modifier.fillMaxWidth().padding(bottom = 20.dp)) {
                            Text(
                                "古珠",
                                color = WhiteDC,
                                fontSize = 14.sp,
                                modifier = Modifier.align(Alignment.TopStart)
                            )
                            Text(
                                "至纯天珠",
                                color = Color.White,
                                fontSize = 14.sp,
                                fontWeight = FontWeight.Bold,
                                modifier = Modifier.align(Alignment.TopEnd)
                            )
                        }
                        Spacer(
                            modifier = Modifier
                                .background(Gray64)
                                .height(1.dp)
                                .fillMaxWidth()
                        )

                        ConstraintLayout (modifier = Modifier.fillMaxWidth().padding(top = 20.dp, bottom = 20.dp)) {
                            val (nameLayout, valueLayout) = createRefs()
                            Text(
                                "名称",
                                color = WhiteDC,
                                fontSize = 14.sp,
                                modifier = Modifier.constrainAs(nameLayout) {
                                    top.linkTo(parent.top)
                                    start.linkTo(parent.start)
                                    width = Dimension.percent(0.3f)
                                }
                            )
                            Text(
                                "[一物一图)藏区天然老矿玛瑙天珠皮壳风化颜色漂亮项链",
                                color = Color.White,
                                fontSize = 14.sp,
                                fontWeight = FontWeight.Bold,
                                modifier = Modifier.constrainAs(valueLayout) {
                                    top.linkTo(parent.top)
                                    start.linkTo(nameLayout.end)
                                    width = Dimension.percent(0.7f)
                                }
                            )
                        }
                        Spacer(
                            modifier = Modifier
                                .background(Gray64)
                                .height(1.dp)
                                .fillMaxWidth()
                                .padding(top = 20.dp, bottom = 20.dp)
                        )
                        Box(modifier = Modifier.fillMaxWidth().padding(top = 20.dp, bottom = 20.dp)) {
                            Text(
                                "尺寸mm",
                                color = WhiteDC,
                                fontSize = 14.sp,
                                modifier = Modifier.align(Alignment.TopStart)
                            )
                            Text(
                                "40*11mm",
                                color = Color.White,
                                fontSize = 14.sp,
                                fontWeight = FontWeight.Bold,
                                modifier = Modifier.align(Alignment.TopEnd)
                            )
                        }
                        Spacer(
                            modifier = Modifier
                                .background(Gray64)
                                .height(1.dp)
                                .fillMaxWidth()
                                .padding(top = 20.dp, bottom = 20.dp)
                        )
                        Box(modifier = Modifier.fillMaxWidth().padding(top = 20.dp, bottom = 20.dp)) {
                            Text(
                                "品质",
                                color = WhiteDC,
                                fontSize = 14.sp,
                                modifier = Modifier.align(Alignment.TopStart)
                            )
                            Text(
                                "全品",
                                color = Color.White,
                                fontSize = 14.sp,
                                fontWeight = FontWeight.Bold,
                                modifier = Modifier.align(Alignment.TopEnd)
                            )
                        }

                        Spacer(
                            modifier = Modifier
                                .background(Gray64)
                                .height(1.dp)
                                .fillMaxWidth()
                                .padding(top = 20.dp, bottom = 20.dp)
                        )
                        Box(modifier = Modifier.fillMaxWidth().padding(top = 20.dp, bottom = 20.dp)) {
                            Text(
                                "登记方式",
                                color = WhiteDC,
                                fontSize = 14.sp,
                                modifier = Modifier.align(Alignment.TopStart)
                            )
                            Text(
                                "自助登记",
                                color = Color.White,
                                fontSize = 14.sp,
                                fontWeight = FontWeight.Bold,
                                modifier = Modifier.align(Alignment.TopEnd)
                            )
                        }


                    }

                    Spacer(modifier = Modifier.height(20.dp))
                    ConstraintLayout(
                        modifier = Modifier
                            .fillMaxWidth()
                            .clip(RoundedCornerShape(16.dp))
                            .background(Black21)
                            .padding(12.dp)
                    ) {
                        val (titleLayout, updateLayout, imageListLayout) = createRefs()
                        Text(
                            "登记图片(请核对登记图片)",
                            color = Color.White,
                            fontSize = 16.sp,
                            textAlign = TextAlign.Start,
                            modifier = Modifier.constrainAs(titleLayout) {
                                top.linkTo(parent.top)
                                start.linkTo(parent.start)
                            }
                        )
                        Text(
                            "修改",
                            color = YellowFC,
                            fontSize = 14.sp,
                            textAlign = TextAlign.Start,
                            modifier = Modifier
                                .width(60.dp)
                                .constrainAs(updateLayout) {
                                    top.linkTo(parent.top)
                                    end.linkTo(parent.end)
                                }
                        )
                        LazyVerticalGrid(
                            columns = GridCells.Fixed(3), // 限制为两列
                            modifier = Modifier
                                .constrainAs(imageListLayout) {
                                    top.linkTo(titleLayout.bottom, 16.dp)
                                    start.linkTo(parent.start)
                                    end.linkTo(parent.end)
                                }
                                .fillMaxWidth()
                                .height(520.dp),
                            verticalArrangement = Arrangement.spacedBy(20.dp),
                            horizontalArrangement = Arrangement.spacedBy(12.dp),
                            content = {
                                items(11) { itemPosition ->
                                    Box(
                                        modifier = Modifier
                                            .fillMaxWidth()
                                            .height(116.dp)
                                            .background(
                                                color = Color(0xFF211C18),
                                                shape = RoundedCornerShape(16.dp)
                                            ), contentAlignment = Alignment.Center
                                    ) {

                                        Image(
                                            painter = painterResource(id = R.drawable.ic_good_demo), // 替换为你的图片资源ID
                                            contentDescription = "Logo Image", // 图片描述，对于无障碍很重要
                                            contentScale = ContentScale.Crop, // 图片填充模式，根据你的需求选择合适的模式
                                            modifier = Modifier
                                                .clip(RoundedCornerShape(8.dp))
                                                .align(Alignment.TopCenter)
                                                .size(90.dp)
                                        )
                                        Text(
                                            text = "至纯天珠",
                                            color = Color.White,
                                            fontSize = 12.sp,
                                            modifier = Modifier.align(Alignment.BottomCenter)
                                        )


                                    }
                                }
                            }
                        )


                    }

                    Spacer(modifier = Modifier.height(16.dp))
                    ConstraintLayout(
                        modifier = Modifier
                            .fillMaxWidth()
                            .clip(RoundedCornerShape(16.dp))
                            .background(Black21)
                            .padding(12.dp)
                    ) {
                        val (titleLayout, updateLayout, videoLayout) = createRefs()
                        Text(
                            "宝物视频",
                            color = Color.White,
                            fontSize = 16.sp,
                            fontWeight = FontWeight.Bold,
                            textAlign = TextAlign.Start,
                            modifier = Modifier.constrainAs(titleLayout) {
                                top.linkTo(parent.top)
                                start.linkTo(parent.start)
                            }
                        )
                        Text(
                            "修改",
                            color = YellowFC,
                            fontSize = 14.sp,
                            textAlign = TextAlign.Start,
                            modifier = Modifier
                                .constrainAs(updateLayout) {
                                    top.linkTo(parent.top)
                                    end.linkTo(parent.end)
                                }
                        )

                        Image(painter = painterResource(id = R.drawable.ic_good_demo), contentDescription = null,
                            modifier = Modifier.fillMaxWidth().height(200.dp).constrainAs(videoLayout) {
                            top.linkTo(titleLayout.bottom,16.dp)
                            start.linkTo(parent.start)
                        })
                    }
                    Spacer(modifier = Modifier.height(20.dp))
                    Text(
                        "登记说明",
                        color = Color.White,
                        fontSize = 16.sp,
                        fontWeight = FontWeight.Bold
                    )
                    Text(
                        "1、在线登记可能受拍摄角度、清晰度等因素影响,请您提供满足拍摄要求的实拍图;",
                        color = WhiteC8,
                        fontSize = 14.sp
                    )
                    Text(
                        "2、请按照拍摄模板顺序依次拍摄,避免影响登记结果。",
                        color = WhiteC8,
                        fontSize = 14.sp
                    )
                    Text("登记，即同意《传承登记须知》。", color = WhiteC8, fontSize = 14.sp, textAlign = TextAlign.Center, modifier = Modifier.fillMaxWidth().padding(top = 26.dp))
                }

                Row(
                    horizontalArrangement = Arrangement.Start,
                    modifier = Modifier
                        .fillMaxWidth()
                        .align(Alignment.BottomCenter)
                ) {
                    OutlinedButton(
                        onClick = {

                        },
                        modifier = Modifier
                            .height(50.dp)
                            .padding(start = 20.dp, end = 20.dp)
                        ,
                        shape = RoundedCornerShape(100.dp),
                        border = BorderStroke(1.dp, YellowFC),
                    ) {
                        Text("￥120 单次登记", color = YellowFC, fontSize = 18.sp)
                    }
                    Button(
                        onClick = {

                        },
                        modifier = Modifier
                            .height(50.dp)
                            .padding(start = 20.dp, end = 20.dp),
                        shape = RoundedCornerShape(100.dp),
                        colors = ButtonDefaults.buttonColors(containerColor = YellowFC)
                    ) {
                        Text("S超V免费登记", color = Black12, fontSize = 18.sp)
                    }
                }

            }
        }
    )
}

